<template>
  <div class="option">
    <div class="search-item">
      <div class="input-part">
        <span class="iconfont search-icon">&#xe63c;</span>
        <input ref="searchWord" type="text" />
      </div>
      <div class="btn">搜索</div>
    </div>
    <div class="sort">
      <div class="item">销量<span class="iconfont arrow">&#xe65c;</span></div>
      <div class="item">价格<span class="iconfont arrow">&#xe65c;</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListOptions'
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .option
    .search-item
      display flex
      align-items center
      padding: 0 .24rem
      height 1rem
      background $bgColor
      .input-part
        flex 1
        padding 0 .24rem
        border 1px solid #eee
        height .6rem
        display flex
        align-items center
        border-radius .3rem
        background #f8f8f8
        .search-icon
          margin-right .16rem
          color #666
          font-size .4rem
        input
          display block
          flex 1
          background inherit
      .btn
        padding .06rem 0.1rem .06rem 0.34rem
        color #fff
    .sort
      height .6rem
      width: 100%
      display flex
      background $bgColor
      .item
        flex 1
        display flex
        align-items center
        justify-content center
        color #fff
</style>
